<template>
    <div class="login">
        <div class="login-wapper">
            <div class="loginContainer">
                <div class="login-text">西州医院一体化智慧中心</div>
                <el-form ref="ruleFormRef" :model="userInfo" :rules="rules">
                    <el-form-item prop="account">
                        <el-input placeholder="请输入您的用户名/邮箱" v-model="userInfo.account" label-width="100px"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="请输入您的密码" v-model="userInfo.password"
                            label-width="100px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="onSubmit(ruleFormRef)" style="width: 100%" color="#409eff" plain>下一步</el-button>
                    </el-form-item>
                </el-form>

                <el-checkbox label="我已阅读并同意 服务协议 和 隐私政策" v-model="checkList" @change="change" />

                <div class="divider">
                    <el-divider>版权所有</el-divider>

                </div>
            </div>
            <div class="box"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { userLoginReq } from '@/api/user.api';
import { IUserLogin } from '@/types/user.type';
import { reactive, ref, watchEffect } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import { useUserInfo } from '@/store/user.store'
import { storeToRefs } from 'pinia';
const ruleFormRef = ref<FormInstance>()

// 仓库
const userStore = useUserInfo()
const { userInfo, info } = storeToRefs(userStore)
const { login } = userStore


const checkList = ref(false)
const change = () => { }
const router = useRouter()
const rules = {
    account:
        { required: true, message: '请输入您的用户名/邮箱', trigger: 'blur' },
    password:
        { required: true, message: '请输入您的密码', trigger: 'blur' }
}
const onSubmit = (formEl: FormInstance | undefined) => {
    login().then(res => {
        console.log(res.data);
        if (res.data.code === 1) {
            router.push('/home')
        }
    })

}


</script>

<style scoped lang="scss">
.login {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

}

.login-wapper {
    width: 860px;
    height: 400px;
    display: flex;
    // border: 1px solid black;
    // box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.9);
    border: 2px solid #eee;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    border-radius: 10px;

    .login-text {
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

    }

    .box {
        flex: 1;
        background-color: aquamarine;
    }

}

.loginContainer {
    margin-top: 30px;
    padding: 0 20px;
    flex: 1;

    width: 300px;
}

.divider {
    position: relative;
    bottom: -90px;
    // margin-bottom: 20px;
}

// .el-divider {
//     margin-bottom: 20px;
// }
</style>